<script setup>
import {ref, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
const brandForm=ref({})
const emits=defineEmits("")
const props =defineProps({
  brandVisible:{
    type:Boolean,
    default:false
  }
})
const brandDialogVisible=ref(false)
watch(()=>props.brandVisible,(newVal)=>{
  brandDialogVisible.value=newVal;
})
const handleClose=()=>{
  brandDialogVisible.value=false
  brandForm.value={}
  emits("brandDialogVisible",brandDialogVisible.value)
}
const confirmBrand =()=>{
  axios.post('/carcenter-service-order/product-brands/add',brandForm.value).then(resp=>{
    ElMessage.success(resp.data.message)
    handleClose()
  })
}
</script>

<template>
  <el-config-provider>
    <div class="app-container">
      <!-- 新增品牌弹窗 -->
      <el-dialog v-model="brandDialogVisible" title="新增品牌" width="400px" :before-close="handleClose">
        <el-form :model="brandForm" label-width="80px" ref="formRef">
          <el-form-item
              label="品牌名称"
              prop="brandName"
              required
              :rules="[
              { required: true, message: '请输入品牌名称', trigger: 'blur' }
            ]"
          >
            <el-input v-model="brandForm.brandName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="confirmBrand">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </el-config-provider>
</template>

<style scoped>

</style>